<template>
    <view class="mine-info-wrapper">
        <view class="mine-header-wrapper common-interval">
            <view class="base-info">
                <image :src="login ? userInfo.avatarUrl : mzgdUrl"/>
                <view class="base-info-detail">
                   <view class="login-name">{{login ? userInfo.nickName : '未登录'}}</view>
                   <text v-if="login" class="user-role" :class="[!!userVipInfo.vipCarDMemberNum ? 'vip-user' : 'ordinary-user']">
                       {{!!userVipInfo.vipCarDMemberNum ? '会员' : '普通'}}用户
                   </text>
                    <text v-else @tap="loginHandle('login')" class="user-role ordinary-user">点击登录</text>
                </view>
            </view>
            <view class="other-info">
                <view class="borrow-info" v-for="item in borrowingData" :key="item.value">
                    <view class="borrow-num">{{userVipInfo[item.value]}}</view>
                    <view class="borrow-title">{{item.name}}</view>
                </view>
            </view>
        </view>
        <view class="thumb-vip-info" @tap="vipHandle">
            <text class="icon-vip vip-icon"></text>
            <text class="vip-name">拇指会员</text>
            <text class="vip-num" v-if="userVipInfo.vipCarDMemberNum">当前{{userVipInfo.vipCarDMemberNum}}张会员卡</text>
            <text class="vip-num" v-if="!userVipInfo.vipCarDMemberNum && userVipInfo.vipCarDMemberNumOff">{{userVipInfo.vipCarDMemberNumOff}}张未激活会员卡</text>
            <text class="watch-detail"  v-if="userVipInfo.vipCarDMemberNum || userVipInfo.vipCarDMemberNumOff">查看详情</text>
            <text class="open-vip"  v-if="!hidePart && !userVipInfo.vipCarDMemberNum && !userVipInfo.vipCarDMemberNumOff">立即开通</text>
            <text class="more-btn icon-arrow-right" v-if="!hidePart || !!userVipInfo.vipCarDMemberNum"/>
        </view>
        <view class="card-info common-interval" @tap="vipHandle">
            <view class="card-info-item" v-for="(item, index) in cardData" :key="index">
                <image mode="aspectFit" :src="http+item.icon+'.png'" class="rights-interests"/>
                <view class="info-name">{{item.label}}</view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="card-info common-interval">
            <view @tap="$LinkTo('order', item.orderStatus)" class="card-info-item logistics-item" v-for="(item, index) in logisticsData" :key="index">
                <image mode="aspectFit" :src="http+item.icon+'.png'" class="rights-interests"/>
                <view class="info-name">{{item.label}}</view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="common-flex-between book-store">
            <view class="store-title" @click="$LinkTo('bookstore')">
                <text>我的书屋</text>
            </view>
            <view class="store-content">
                <view class="store-content-item"
                      style="position: relative;"
                      v-for="item in bookStore"
                      :key="item.value"
                      @click="$LinkTo(`${item.value}`)"
                >
                    <image :src="item.imgUrl" class="store-position" style="z-index: 1"/>
                    <view class="store-position store-position-txt common-flex-between">
                        <text>{{item.label}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="common-division"/>
        <view class="mine-other-wrapper common-interval">
            <view @tap="utilsClick(item,index)" class="system-setting-item" v-for="(item, index) in systemSetting" :key="index">
                <image mode="aspectFit" :src="http+item.icon+'.png'" class="rights-interests"/>
                <text class="setting-name">{{item.label}}</text>
                <text class="icon-arrow-right icon-btn"/>
            </view>
        </view>
        <gw-user-login ref="userLogin" :modalType="modalType"/>
    </view>
</template>

<script>
    import gwUserLogin from '../components/gw-user-login'
    import { mapGetters } from 'vuex';
    import { getUserVipInfo, getUserInfo } from '@/util/commonFn'
    import {cardData, logisticsData, systemSetting, borrowingData} from '@/util/mock'
    export default {
        name: "index",
        components: {
            gwUserLogin
        },
        computed: {
            ...mapGetters(['login', 'userInfo', 'userVipInfo', 'shoppingNum', 'hidePart'])
        },
        data() {
            return {
                isVip: false,
                http: this.$https,
                modalType: 'login',
                cardData: cardData,
                logisticsData: logisticsData,
                systemSetting: systemSetting,
                borrowingData: borrowingData,
                bookStore: [
                    {
                        value: 'bookstorePlan',
                        label: '定制专属阅读计划',
                        imgUrl: this.$https+'plan1.png'
                    },
                    {
                        value: 'bookstoreBaogao',
                        label: '查看阅读报告',
                        imgUrl: this.$https+'report.png'
                    },
                ],
                borrowName: {
                    vipCardMemberBorrowFrequency: '10次',
                    vipCardMemberTime: '10天',
                    booksNum: '1000本',
                    keepNum: '20本'
                },
                mzgdUrl: 'https://img.thumbrary.com/mzgd.png'
            }
        },
        onLoad(){
            getUserInfo();
        },
        onShow(){
            getUserVipInfo();
            if(this.shoppingNum){
                uni.setTabBarBadge({
                    index: 2,
                    text: `${this.shoppingNum}`
                });
            } else {
                uni.removeTabBarBadge({
                    index: 2
                })
            }
        },
        methods: {
            // 工具栏跳转
            utilsClick(item,index){
                if(index == 0){
                    if(!this.$store.getters.vipCardNum || !this.$store.getters.becomeShareAddTime){
                        this.$routerTo({path:'/pagesMine/copartner/vip-power',query:{}})
                        return
                    }
                }
                this.$LinkTo(item.value)
            },
            vipHandle(){
                if(!this.userVipInfo.vipCarDMemberNum && !this.userVipInfo.vipCarDMemberNumOff){
                  this.loginHandle('open-vip');
                }else{
                    this.watchHandle(true)
                }
            },
            loginHandle(val){
                if(this.login && val==='open-vip'){
                    uni.navigateTo({
                        url: '/pagesMine/vip/index'
                    });
                    return;
                }
                this.$refs.userLogin.showModal = true;
            },
            watchHandle(isVip){
                if(isVip){
                    this.$LinkTo('vip', !this.userVipInfo.vipCarDMemberNum);
                } else {
                    this.loginHandle('open-vip');
                }
            }
        },
        mounted(){
            uni.$on('loginHandle', (val)=>{
                this.modalType = val;
                this.$refs.userLogin.showModal = true;
            })
        },
        beforeDestoy(){
            uni.$off('loginHandle');
        }
    }
</script>

<style scoped lang="scss">
    .mine-info-wrapper {
        background:rgba(242,245,247,1);
        height: 100%;
        .mine-header-wrapper{
            padding-top: 40rpx;
            padding-bottom: 50rpx;
            box-sizing: border-box;
            color: #fff;
            background:linear-gradient(141deg,rgba(104,159,252,1) 0%,rgba(22,109,254,1) 100%);
            .base-info{
                display: flex;
                height: 120rpx;
                image{
                    flex: 0 0 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                }
                &-detail{
                    flex-grow: 1;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 20rpx;
                    .login-name{
                        font-size:32rpx;
                        font-weight:bold;
                        line-height:45rpx;
                    }
                    .user-role{
                        border-radius:4rpx;
                        width: 100rpx;
                        text-align: center;
                        height: 38rpx;
                        line-height: 38rpx;
                        font-size: 24rpx;
                        margin-top: 12rpx;
                        &.ordinary-user{
                            border:1px solid #fff;
                        }
                        &.vip-user{
                            color:rgba(255,106,20,1);
                            background:rgba(255,203,59,1);
                        }
                    }
                }
            }
            .other-info{
                display: flex;
                justify-content: space-between;
                margin: 40rpx 20rpx 0 20rpx;
                .borrow-info{
                    /*width: 101rpx;*/
                    text-align: center;
                    justify-content: space-between;
                    &:last-of-type{
                        margin-right: 0;
                    }
                    .borrow-num{
                        font-size:38rpx;
                        font-weight:bold;
                        line-height:53rpx;
                    }
                    .borrow-title{
                        font-size:24rpx;
                        margin-top: 20rpx;
                    }
                }
            }
        }
        .thumb-vip-info{
            margin: 40rpx 30rpx 0;
            width:690rpx;
            height:89rpx;
            background:linear-gradient(129deg,rgba(89,89,89,1) 0%,rgba(27,27,27,1) 100%);
            border-radius:44rpx 44rpx 0px 0px;
            align-items: center;
            color:rgba(255,227,190,1);
            padding: 16rpx 0;
            box-sizing: border-box;
            .vip-icon{
                margin-left: 30rpx;
                font-size: 45rpx;
            }
            .vip-name{
                font-size:38rpx;
                font-weight:bold;
                margin-left: 18rpx;
            }
            .vip-num{
                margin-left: 18rpx;
                font-size: 28rpx;
            }
            .watch-detail{
                margin-left: 50rpx;
                font-size: 24rpx;
            }
            .open-vip{
                margin-left: 245rpx;
            }
            .more-btn{
                width:42rpx;
                height:42rpx;
                background:linear-gradient(297deg,rgba(255,227,190,1) 0%,rgba(255,206,140,1) 100%);
                border-radius:50%;
                display: inline-block;
                margin-left: 15rpx;
                text-align: center;
                font-size: 22rpx;
                color: #202020;
                font-weight: bold;
                &:before{
                    line-height: 42rpx;
                }
            }
        }
        .card-info {
            display: flex;
            justify-content: space-between;
            background: #fff;
            text-align: center;
            padding: 20rpx 50rpx;
            &-item {
                text-align: center;
                .rights-interests{
                    width: 70rpx;
                    height: 70rpx;
                }
                .info-name{
                    color:rgba(51,51,51,1);
                    margin-top: 20rpx;
                    font-size: 24rpx;
                }
            }
        }
        .book-store{
            padding: 40rpx 30rpx;
            background: #fff;
            .store-title{
                width:331rpx;
                height:250rpx;
                background:url("https://img.thumbrary.com/bookstore1.png");
                background-size: cover;
                border-radius:8rpx;
                padding: 31rpx 0 0 26rpx;
                box-sizing: border-box;
                position: relative;
                font-size:36rpx;
                color: #ffffff;
                font-weight:bold;
            }
            .store-content{
                height:250rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                &-item{
                    width:350rpx;
                    height:120rpx;
                }
                .store-position{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    &-txt{
                        align-items: center;
                        padding: 0 18rpx;
                        color: #ffffff;
                        border-radius:4px;
                        box-sizing: border-box;
                        font-size:24rpx;
                        font-weight:500;
                        z-index: 2;
                    }
                }
            }
        }
        .logistics-item{
            .rights-interests{
                width: 50rpx;
                height: 50rpx;
            }
        }
        .mine-other-wrapper{
            padding-top: 10rpx;
            .system-setting-item{
                margin: 40rpx 0;
                font-size:28rpx;
                .rights-interests{
                    width: 45rpx;
                    height: 45rpx;
                    vertical-align: middle;
                }
                .setting-name{
                    margin-left: 25rpx;
                    font-weight:bold;
                    color:rgba(51,51,51,1);
                }
                .icon-btn{
                    float: right;
                    color:rgba(153,153,153,1)
                }
            }
        }
    }
</style>